<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/product/spumanage"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>商品类别</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-s-tools"></i> &nbsp; 管理信息
            </h3>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right">
          <div class="grid-content bg-purple">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="$router.push('/home/product/addcategory')"
              >添加商品类别</el-button
            >
          </div>
        </el-col>
      </el-row>
      <div class="divider"></div>

      <el-row :gutter="15" class="whererow">
        <el-col :span="4" style="line-height: 32px">通过类别名称搜索</el-col>
        <el-col :span="6">
          <el-input
            v-model="search"
            type="text"
            size="small"
            placeholder="请输入类别名称"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </el-col>
      </el-row>
    </div>

    <div class="noticerow box">
      <i class="el-icon-edit"></i> &nbsp; 已选择了0项
    </div>

    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column align="center" label="编号" width="60" type="index">
      </el-table-column>
      <el-table-column align="center" label="类别名称">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="级别" width="100">
        <template slot-scope="scope">{{ scope.row.depth }}</template>
      </el-table-column>
      <el-table-column align="center" label="排序" width="60">
        <template slot-scope="scope">{{ scope.row.sort }}</template>
      </el-table-column>
      <el-table-column align="center" label="是否启用" width="140">
        <template slot-scope="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.enable"
            active-color="#1aa"
            inactive-color="#aaa"
            @change="changeActiveState(scope.row.id, scope.row.enable)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否显示在导航栏" width="140">
        <template slot-scope="scope">
          <el-switch
            :active-value="1"
            :inactive-value="0"
            v-model="scope.row.display"
            active-color="#1aa"
            inactive-color="#aaa"
            @change="changeDisplayState(scope.row.id, scope.row.display)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="设置" width="150">
        <template slot-scope="scope">
          <el-button
            title="查看下级"
            size="mini"
            icon="el-icon-folder-opened"
            :disabled="scope.row.parent == 0"
            @click="$router.push(`category?parentId=${scope.row.id}`)"
            >查看下级</el-button
          >
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170">
        <template slot-scope="scope">
          <el-button
            title="编辑"
            type="warning"
            size="mini"
            icon="el-icon-edit"
            circle
            @click="
              $router.push('/home/product/updatecategory?id=' + scope.row.id)
            "
          ></el-button>
          <el-button
            title="删除"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            circle
            @click="deleteItem(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",   // 用于绑定类别名称搜索框的值
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      tableData: [],
      multipleSelection: [],
    };
  },
  methods: {

    /** 通过类别id删除类别 */
    deleteItem(id) {
      this.$confirm("确认删除该类别?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // 选择确认，执行删除业务
        this.categoryApi.delete({ id }).then((res) => {
          console.log("通过id删除类别：", res);
          if (res.data.state == 200) {
            // 删除成功，重建缓存后 重新加载品牌列表
            return this.categoryApi.rebuildCache()
          } else {
            this.$alert(res.data.message, "提示");
          }
        }).then(res=>{
            console.log("重建缓存：", res)
            let parentId = this.$route.query.parentId;
            if (parentId == undefined) parentId = 0;
            this.loadCategoryList(parentId);
        })
      });
    },

    /** 通过开关 修改类别状态 是否启用 */
    changeActiveState(id, enable) {
      console.log("修改类别导航栏激活状态", `id:${id} enable:${enable}`);
      if (enable) {
        // 修改为激活状态
        this.categoryApi.enable({ id }).then((res) => {
          if (res.data.state == 200) {
            this.$message({
              showClose: true,
              message: "更新该类别为激活状态，已生效",
              type: "success",
            });
            // 重建缓存后 回首页
            this.categoryApi.rebuildCache()
          } else {
            this.$alert(res.data.message, "提示");
          }
        })
      } else {
        this.categoryApi.disable({ id }).then((res) => {
          if (res.data.state == 200) {
            this.$message({
              showClose: true,
              message: "更新该类别为禁用状态，已生效",
              type: "warning",
            });
            // 重建缓存后 回首页
            this.categoryApi.rebuildCache()
          } else {
            this.$alert(res.data.message, "提示");
          }
        });
      }
    },

    /** 通过开关 修改类别显示状态 */
    changeDisplayState(id, display) {
      console.log("修改类别显示状态", `id:${id} display:${display}`);
      if (display) {
        // 修改为激活状态
        this.categoryApi.show({ id }).then((res) => {
          if (res.data.state == 200) {
            this.$message({
              showClose: true,
              message: "更新该类别为显示状态，已生效",
              type: "success",
            })
            // 重建缓存后 回首页
            this.categoryApi.rebuildCache()
          } else {
            this.$alert(res.data.message, "提示");
          }
        });
      } else {
        this.categoryApi.hide({ id }).then((res) => {
          if (res.data.state == 200) {
            this.$message({
              showClose: true,
              message: "更新该类别为隐藏状态，已生效",
              type: "warning",
            });
            // 重建缓存后 回首页
            this.categoryApi.rebuildCache()
          } else {
            this.$alert(res.data.message, "提示");
          }
        });
      }
    },

    handleSortChange(a, b) {
      return a.price - b.price;
    },

    /**
     *  加载类别列表
     *  @param parentId 父类别ID
     */
    loadCategoryList(parentId) {
      // 整理请求参数
      let params = {
        parentId: parentId,
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      this.categoryApi.queryByParent(params).then((res) => {
        console.log("加载类别列表：", res);
        if (res.data.state == 200) {
          this.tableData = res.data.data;
        } else {
          this.$alert(res.data.message, "提示");
        }
      });
    },
  },

  /** 生命周期方法 页面挂在完毕后执行 */
  mounted() {
    // 加载当前福类别下的类别列表
    let parentId = this.$route.query.parentId;
    if (parentId == undefined) {
      parentId = 0;
    }
    // 加载0类别下的内容  （一级类别）
    this.loadCategoryList(parentId);
  },
};
</script>
